<template>
    <view class='page'>
        <u-navbar :is-back="false" :background="background">
            <view class="slot-wrap">
                <u-search v-model="queryParams.key_name" :show-action="showAction" height="56"
                    :action-style="{color: '#fff'}" @search="search" @blur="blur" @clear="clear"
                    @change="input"></u-search>
            </view>
        </u-navbar>
        <view class="content">
            <z-paging v-if="cateId" ref="paging" v-model="dataList" @query="getList">
                <template #top>
                    <!-- #ifdef MP-WEIXIN -->
                    <z-tabs class="service-tab" :style="'top:'+ (titletop+titleheight)+'px'" :list="tabList"
                        scroll-count="4" active-color="#2e996f" @change="tabChange" />
                    <!-- #endif -->
                    <!--                   
                    <view class="service-tab" :style="'top:'+ (titletop+titleheight)+'px'">
                        <view class="box">
                            <view class="tab" v-for="item,index in tabList" :key="index"
                                :class="{'action':(tabIndex==index)}" @click="onOrderTab(index,item.id)">
                                <text>{{item.name}}</text>
                                <text class="line"></text>
                            </view>
                        </view>
                    </view>
                  
                    <view class="service-tab" :style="'top:'+ (titletop+titleheight)+'px'">
                        <view class="box">
                            <view class="tab" v-for="item,index in tabList" :key="index"
                                :class="{'action':(tabIndex==index)}" @click="onOrderTab(index,item.id)">
                                <text>{{item.name}}</text>
                                <text class="line"></text>
                            </view>
                        </view>
                    </view> -->
                </template>
                <view class="service-list" v-for="e,i in tabList" :key="i" v-show="tabIndex==i">
                    <view class="goods-list">
                        <view class="list" v-for="(item,index) in dataList" :key="index"
                            @click.stop="toDetail(item.id)">
                            <view class="pictrue">
                                <image :src="item.cover_pict" mode="heightFix"></image>
                            </view>
                            <view class="title">
                                {{ item.name }}
                            </view>
                            <view class="price-info">
                                <view>
                                    <!-- v-if="is_pick==1" v-if="item.is_pick==0" style="color: #999;"-->
                                    <view class="tag" v-if="item.is_pick==1">
                                        <text class="lg text-gray cuIcon-appreciatefill"></text>
                                        <text class="p">推荐服务</text>
                                    </view>
                                    <view class="tag" v-if="item.is_pick==0">
                                        <text class="lg text-gray cuIcon-appreciatefill" style="color: #999;"></text>
                                        <text class="p">推荐服务</text>
                                    </view>
                                </view>
                                <view class="user-price">
                                    <text class="min">￥{{ item.current_price}}/次</text>
                                    <text class="max">{{ item.price }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </z-paging>
        </view>
    </view>
</template>
<script>
    import {
        getCateLists,
        getContLists
    } from "@/api/service.js"
    export default {
        components: {},
        data() {
            return {
                tabList: [],
                queryParams: {
                    page: 1,
                    limit: 20,
                    key_name: '',
                    cate_id: 1
                },
                cateId: "",
                dataList: [],
                background: {

                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                },
                titleheight: 0,
                titletop: 0,
                tabIndex: 0,
            };
        },
        onLoad(options) {
            // #ifdef MP-WEIXIN
            getApp().getHeight();
            this.titleheight = getApp().titleheight;
            this.titletop = getApp().titletop;
            // #endif
        },
        onShow() {
            this.getCateList()
        },
        methods: {
            getCateList() {
                getCateLists(this.queryParams).then(res => {
                    this.tabList = res.data
                    console.log(this.tabList, '000')
                    this.cateId = this.tabList[0].id
                })
            },
            getList(page) {
                this.queryParams.cate_id = this.cateId
                this.queryParams.page = page
                getContLists(this.queryParams).then(res => {
                    this.$refs.paging.complete(res.data.lists);
                }).catch(err => {
                    this.$refs.paging.complete(false);
                })
            },
            search(e) {
                console.log(e, "搜素")
                // uni.showToast({
                //     title: '搜索：' + res.value,
                //     icon: 'none'
                // })
            },
            input(res) {
                // console.log('----input:', res)
            },
            clear(res) {
                this.$refs.paging.reload();
            },
            blur(res) {
                this.$refs.paging.reload();
            },
            // focus(e) {
            //     uni.showToast({
            //         title: 'focus事件，输出值为：' + e.value,
            //         icon: 'none'
            //     })
            // },
            cancel(res) {
                uni.showToast({
                    title: '点击取消，输入值为：' + res.value,
                    icon: 'none'
                })
            },
            /**
             * 服务tab点击
             */
            onOrderTab(type, id) {
                this.tabIndex = type;
                this.cateId = id
                //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：getList方法！！
                this.$refs.paging.reload();
            },
            toDetail(id) {
                uni.navigateTo({
                    url: "/pagesA/service/detail?id=" + id
                })
            },

            tabChange(index) {
                this.tabIndex = index;
                this.cateId = this.tabList[index].id
                //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
                this.$refs.paging.reload();
            },
        },
    };
</script>
<style scoped lang='scss'>
    .page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;

        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            u-search {
                width: 90%;
                margin: 0 auto;
            }
        }

        /* 订单tab */
        .service-tab {
            position: fixed;
            left: 0;
            // #ifdef APP-PLUS || H5
            top: calc(88rpx + var(--status-bar-height));
            // #endif
            z-index: 999;
            width: 100%;

            /deep/.z-tabs-conatiner {
                height: 120rpx;
                padding-top: 30rpx;
            }
        }

        /* 订单列表 */
        .service-list {
            width: 100%;

            // margin-top: calc(280rpx + var(--status-bar-height));
            .goods-list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 30rpx 30rpx 20px;

                .list {
                    width: 332rpx;
                    height: 380rpx;
                    margin-bottom: 20rpx;
                    background-color: #ffffff;
                    border-radius: 10rpx;
                    overflow: hidden;
                    border: solid 1px #bdbdbd;

                    .pictrue {
                        display: flex;
                        justify-content: center;
                        width: 100%;

                        image {
                            height: 232rpx;
                        }
                    }

                    .title {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        white-space: normal;
                        font-size: 26rpx;
                        text-align: center;
                        font-weight: 600;
                        padding: 20rpx 0;
                    }

                    .price-info {
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: space-between;
                        padding: 0 10rpx;

                        //   height: 80rpx;
                        .tag {
                            text {
                                font-size: 32rpx;
                                color: $base;
                            }

                            .p {
                                font-size: 24rpx;
                                padding-left: 10rpx;
                            }
                        }

                        .user-price {
                            display: flex;
                            align-items: center;

                            text {
                                color: $price-clor;
                            }

                            .min {
                                font-size: 24rpx;
                            }

                            .max {
                                font-size: 32rpx;
                            }
                        }
                    }
                }
            }
        }
    }

    /deep/.uni-input-input {
        color: #000000;
        font-size: 24rpx;
    }

    /* #ifdef MP-WEIXIN */
    /deep/.uni-searchbar__box-search-input {
        color: #000000;
        font-size: 24rpx;
    }

    /* #endif */
    /deep/.zp-l-container {
        padding-bottom: 100rpx;
    }

    /deep/.zp-custom-refresher-view {
        //   z-index: 99999999;
        margin-top: calc(125rpx + var(--status-bar-height)) !important;
    }
</style>